import React from 'react'
import {connect} from 'dva'
import {Link, browserHistory} from 'dva/router'
import {Table, Row, Col, Form, Input, InputNumber,Select,Button, Switch, Modal, Popconfirm, message} from 'antd';
import Validator from '../../../utils/Validator';
import RightBox from "../../../components/commons/RightBox";
import RIGHT from "../../../utils/RightConstants";
import Constants  from '../../../utils/Constants';
import DeclarationDetail from '../../../components/basedata/declarationDetail';
const FormItem = Form.Item;
const Option = Select.Option;


const declaration = Form.create()(class Declaration extends React.Component{
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        this.props.dispatch({ type: 'declaration/queryLesseeDeclaration', payload: { page: Constants.DEFAULT_PAGE,
            status: 1
        } });
    }

    onEdit = (id) => {
        this.props.dispatch({
            type: 'declaration/getLesseeDeclaration',
            payload: {id}
        });
        this.declarationDetail.handleOpen();
    };

    handleSearch = (flag) => {
        let newPage = this.props.declaration.page;
        if(flag) newPage.page = 1;
        this.props.dispatch({
            type: 'declaration/queryLesseeDeclaration',
            payload: {
                ...this.props.form.getFieldsValue(),
                page: newPage
            }
        });
    };

    columns = [
        // {
        // title: '业务类型', key: 'businessType',
        //     render(record) {
        //         let type = "";
        //         if(record.businesstype == "priceStrategy"){
        //             type = '价格策略';
        //         }else if(record.businesstype == "orderSettlement") {
        //             type = '收汇区间';
        //         }else{
        //             type = '无';
        //         }
        //         return (
        //             type
        //         );
        //     }
        // },
        // { title: '状态',render(record) {
        //         return (
        //             record.status == 1 ? "启用" : "停用"
        //         );
        //     }
        // },
        {title: '报关抬头名称',dataIndex: 'name',key: 'name'},
        {title: '纳税人识别号',dataIndex: 'tin',key: 'tin'},
        {title: '开户银行',dataIndex: 'openbank',key: 'openbank'},
        {title: '开户支行',dataIndex: 'bankbranch',key: 'bankbranch'},
        {title: '收款人账户',dataIndex: 'payeeno',key: 'payeeno'},
        {title: '收款人',dataIndex: 'payeename',key: 'payeename'},
        {title: '创建人',dataIndex: 'creator',key: 'creator'},
        {title: '修改人',dataIndex: 'updator',key: 'updator'},
        {title: '创建时间',dataIndex: 'createtime',key: 'createtime'},
        {title: '操作',width: '100px',
            render: (record) => {
                return (
                    <span>
                    <RightBox resource={RIGHT.BASEDATA.BASE_DECLARATION_EDIT}>
                        <a href="#" onClick={this.onEdit.bind(this, record.id)}>编辑</a><span className="ant-divider"/>
                    </RightBox>
                    <RightBox resource={RIGHT.BASEDATA.BASE_DECLARATION_DELETE}><Popconfirm placement="leftTop" title={'数据删除后将不可以恢复，是否继续删除？'} onConfirm={() => {
                        this.props.dispatch({
                            type: 'declaration/deleteLesseeDeclaration',
                            payload: {
                                id : record.id,
                                onSuccess: () => this.handleSearch()
                            }
                        });
                    }} okText="是" cancelText="否">
                        <a href="#">删除</a>
                    </Popconfirm></RightBox>
                </span>
            );
        }
    }];

    render(){
        let formItemLayout = { labelCol: {span: 8}, wrapperCol: {span: 16}};
        let values = this.props.form.getFieldsValue();
        const { getFieldDecorator } = this.props.form;

        let pagination = {
            showTotal: total => `共 ${total} 条数据`,
            pageSize: this.props.declaration.page.size,
            current: this.props.declaration.page.page,
            total: this.props.declaration.page.totalRow,
            showSizeChanger: true,
            onShowSizeChange: (current, size) => {
                let newPage = this.props.declaration.page;
                newPage.size = size;
                newPage.page = 1;
                this.props.dispatch({
                    type: 'declaration/getLesseeDeclaration',
                    payload: {
                       ...values,
                       status: 1,
                        page: newPage
                    }
                });
            },
            onChange: (pageNumber, pageSize) => {
                let newPage = this.props.declaration.page;
                newPage.page = pageNumber;
                this.props.dispatch({
                    type: 'declaration/getLesseeDeclaration',
                    payload: {
                        ...values,
                        status: 1,
                        page: newPage
                    }
                });
            }
        }



        return (
            <div>
                <Row>
                    <Col span={6}>
                        <FormItem {...formItemLayout} label={'报关抬头名称'}>
                            {getFieldDecorator('name')(
                                <Input style={{width: 200}}/>
                            )}
                        </FormItem>
                    </Col>
                    <Col span={7}>
                        <Button type="primary" icon="search" style={{marginRight: 5}} onClick={this.handleSearch.bind(this, true)}>查询</Button>
                        <RightBox resource={RIGHT.BASEDATA.BASE_DECLARATION_ADD}><Button icon="plus" onClick={this.onEdit.bind(this, null)}>添加报关抬头</Button></RightBox>
                    </Col>
                </Row>

                <Table rowKey="id" dataSource={this.props.declaration.list} loading={this.props.loading} columns={this.columns} bordered={true} size={'middle'} scroll={{ x: true }} pagination={pagination} />
                <DeclarationDetail wrappedComponentRef={(inst) => this.declarationDetail = inst} refreshList={this.handleSearch} />
            </div>
        );
    }
})

function mapStateToProps(state){
    return{
        loading: state.loading.models.declaration, declaration: state.declaration
    };
}

export default connect(mapStateToProps)(declaration);
